// 这是首页的组件
<template>
  <div class="home-list">
    <!-- 隐藏头部 -->
    <div class="headNone">
      <div class="SiteBox">
        <!-- <span>{{curCity}}</span> -->
        <i class="iconfont">&#xe733;</i>
      </div>
      <div class="cityBox">电影</div>
    </div>
    <!-- 隐藏头部 -->
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- 图片 -->
        <div class="swiper-slide">
          <img src="../style/images/img1.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img src="../style/images/img2.png" alt>
        </div>
        <div class="swiper-slide">
          <img src="../style/images/img3.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img src="../style/images/img4.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img src="../style/images/img5.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img src="../style/images/img6.jpg" alt>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要前进后退按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <!-- 轮播图 -->
    <!-- 城市定位 -->
    <div class="city" @click="citySite()">
      <span>{{ curCity }}</span>
      <i class="iconfont">&#xe733;</i>
    </div>
    <!-- 城市定位 -->
    <!-- 正在热映 -->
    <div class="nav" id="nav">
      <ul>
        <li @click="switchList('now')" :class="{'active':$route.path==='/home/NowPlay'}">
          正在热映
          <span :class="{'actives':$route.path==='/home/NowPlay'}"></span>
        </li>
        <li @click="switchList('soon')" :class="{'active':$route.path==='/home/SoonPlay'}">
          即将上映
          <span :class="{'actives':$route.path==='/home/SoonPlay'}"></span>
        </li>
      </ul>
    </div>
    <!-- 底部导航 -->
    <transition
      mode="out-in"
      :duration="800"
      appear
      enter-active-class="animated rollIn"
      leave-active-class="animated rollOut"
    >
      <!-- 正在热映渲染NowPlay的index -->
      <router-view></router-view>
    </transition>
    <!-- 透明背景 -->
  </div>
</template>

<script>
import Swiper from "swiper";
import { mapState } from "vuex";
export default {
  // 暴露这个home.vue文件
  name: "home",
  data() {
    return {
      // 拿到数据是要渲染到页面的
      // curCity: "",
      isShow: false
    };
  },
  // 计算属性
  computed: {
    ...mapState(["curCity"])
  },
  // 方法
  methods: {
    citySite() {
      this.$router.push("/user/citySite");
    },
    /**
     * 正在热映，切换路由
     */
    switchList(type) {
      if (type === "now") {
        this.$router.push("/home/NowPlay");
        // this.$router.push({ name: "NowPlay" }); //router.name
      } else {
        this.$router.push("/home/SoonPlay");
      }
    }
  },

  mounted() {
    // new一个对象，这对象就是这个轮播图
    new Swiper(".swiper-container", {
      // loop: true, //无缝轮播
      autoplay: true, //自动播放
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar"
      },
      // 分页器，小圆点
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
@import "swiper/dist/css/swiper.min.css"; //轮播图组件
.home-list {
  flex: 1;
  overflow-y: auto; //滚动条就不会是body的了
  position: relative;

  .swiper-container {
    height: px2rem(210);
  }
  // 在控制台找到Element的class名就可以该样式
  .swiper-scrollbar-drag {
    background: red;
    width: px2rem(150);
  }
  // 轮播图的一些组件样式
  .swiper-pagination-bullet {
    color: blue;
    width: px2rem(10);
    height: px2rem(10) !important; //最高权级
  }
  img {
    width: 100%;
  }
  // 城市定位
  .city {
    position: absolute;
    top: px2rem(20);
    left: px2rem(10);
    width: px2rem(75);
    height: px2rem(35);
    background: rgb(75, 67, 67);
    opacity: 0.6;
    z-index: 1;
    border-radius: px2rem(15);
    text-align: center;
    span {
      display: block;
      width: 80%;
      color: white;
      font-size: px2rem(14);
      line-height: px2rem(35);
      // margin-left: px2rem(5);
    }

    .iconfont {
      position: absolute;
      top: px2rem(10);
      right: px2rem(3);
      color: white;
      font-size: px2rem(16);
      font-weight: 600;
    }
  }
  // 正在热映
  .nav {
    position: sticky;
    top: px2rem(0);
    display: flex;
    flex: 1;
    width: 100%;
    height: px2rem(49);
    flex-direction: row;
    border-bottom: px2rem(1) solid #eee;
    background: white;
    z-index: 1;

    ul {
      // 父级给flex:1,子级给宽度百分比
      display: flex;
      flex: 1;

      li {
        position: relative;
        display: flex;
        width: 50%;
        font-size: px2rem(16);
        // 水平对齐
        justify-content: center;
        // 侧轴对齐
        align-items: center;

        .actives {
          position: absolute;
          top: px2rem(46);
          display: block;
          width: px2rem(65);
          height: px2rem(2);
          border-bottom: px2rem(2) solid #ff9665;
        }
      }

      li.active {
        color: #ff9665;
      }
    }
  }
  // ===============隐藏的头部==========
  .headNone {
    // position: sticky;
    // top: 0;
    width: 100%;
    height: px2rem(45);
    background: #fff;
    z-index: 1;
    flex-direction: row;
    display: none;

    .SiteBox {
      display: flex;
      float: left;
      width: 25%;
      height: 100%;

      // justify-content: center;
      // align-items: center;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px2rem(75);
        height: 100%;
        font-size: px2rem(16);
      }

      .iconfont {
        position: relative;
        margin-top: 50%;
        right: px2rem(10);
        top: px2rem(-32);
        font-size: px2rem(18);
      }
    }

    .cityBox {
      display: flex;
      width: 50%;
      height: 100%;
      justify-content: center;
      align-items: center;
      font-size: px2rem(18);
    }
  }
}
</style>
